<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海互动-SEA INTERACTIO</title>
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="nav">
        <nav>
            <div class="covers"></div>
            <div class="title clearfix">
                <div class="logo">
                    <a href="javascript:;">
                        <span>SEA</span>
                        <br>
                        <span>INTERACTION</span>
                    </a>
                </div>
                <ul class="clearfix">
                    <li><a href="javascript:;">ABOUT</a></li>
                    <li><a href="javascript:;">TEAM</a></li>
                    <li><a href="javascript:;">SERCIVES</a></li>
                    <li><a href="javascript:;">PORTFOLIO</a></li>
                    <li><a href="javascript:;">CLIENT</a></li>
                    <li><a href="javascript:;">BEHANCE</a></li>
                    <li><a href="javascript:;">CONTACT</a></li>
                </ul>
            </div>
            <div class="intro">
                <p>WE WILL DESIGN YOUR IDEAS</p>
                <span></span>
                <p>我们用优秀的设计帮助企业形成有价值的品牌竞争力</p>
            </div>
        </nav>

        <div class="welcome visiable">
            <div class="box">
                <h2>Welcome to our agency</h2>
                <span></span>
                <p>
                    <span>
                        海互动是一家创造性的网络解决方案公司，结合前端技术与巧妙的设计思路努力带来了独特的人机体验。<br>
                        我们的愿望是让每一个人享受网络带来的美好生活。我们专注于品质和独特的解决方案，
                        从我们的工作可以看出，在所有的媒体：网络、平面和移动。我们总是希望<br>接受挑战，
                        利用我们所有的知识和经验，概念开发，设计和技术实现把每一个新项目打造成精品。
                    </span>
                    <br>
                    SEA INTERACTION is a strategy, branding, and design company.
                </p>
                <div>READ MORE</div>
            </div>
        </div>

        <div class="cover  visiable">
            <div class="covers">
                <h2>Some fun facts 历程</h2>
                <div class="box">
                    <dl>
                        <dt>75 WEBSITES</dt>
                        <span></span>
                        <dd>应用出色的设计和高效的代码<br>
                            (JavaScript,HTML5,CSS3,PHP)我们用创造性
                            <br>的思维来打造创造性的项目。
                        </dd>
                    </dl>
                    <dl>
                        <dt>25 APPS</dt>
                        <span></span>
                        <dd>一个应用被连接到一个服务，集中于完成一个
                            <br>动作。被称为UI / UX设计。最终提供给观众
                            <br>一个美丽的和无缝的体验。
                        </dd>
                    </dl>
                    <dl>
                        <dt>100 LOGOS</dt>
                        <span></span>
                        <dd>一个坚实的标识和身份是一个伟大品牌的基
                            <br>础。愿与您一起创造这个独特的身份，传达你
                            <br>的品牌信息。
                        </dd>
                    </dl>
                    <dl>
                        <dt>150 CLIENT</dt>
                        <span></span>
                        <dd>有时候他们会赞扬我们，有时候会快递啤酒和
                            <br>点心，很高兴和他们一直共事，让我们彼此成
                            <br>为朋友。
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="nav team visiable">
        <div class="box">
            <h2>Our team</h2>
            <span></span>
            <p>
                <span>
                    诚实，勤奋，和信任我们的核心价值观，这些特性会影响我们的业务和生活中的一切。我们真诚地欣赏我们的工作，并为我们的客户争取利益。<br>
                </span>
                <span>
                    With our core values of hoesty, hard work, and trust. Our goal is to have these characteristics
                    influence everything we do in business and in life. We sincerely <br>
                    enjoy the work we do, and our clients garner the benefits.
                </span>
            </p>
        </div>
        <ul class="clearfix">
            <li>
                <a href="javascript:;">
                    <img src="./img/7.1.jpg" alt="">
                    <span>
                        SEA<br>UE Designe
                    </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/7.2.jpg" alt="">
                    <span>
                        LEE<br>PMP 项目管理
                    </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/8.jpg" alt="">
                    <span>
                        LU LEE<br>Marketing Management
                    </span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./img/7.jpg" alt="">
                    <span>
                        BANBAN<br>Project Planning
                    </span>
                </a>
            </li>
        </ul>
    </div>

    <div class="nav service visiable">
        <div class="covers">
            <div class="box">
                <h2>Our services</h2>
                <span></span>
                <p>
                    <span>
                        作为一个诚实的团队，我们承诺要告诉你我们是否是适合这份工作的最佳选择。下面是我们所擅长的几件事情。<br>
                    </span>
                    <span>
                        As honest folks, we promise to tell you whether or not we’re the best fit for the job. Below are
                        a
                        few things we know we’re good at.
                    </span>
                </p>
            </div>
            <div class="info">
                <ul class="clearfix">
                    <li>
                        <img src="./img/6.png" alt="">
                        <span>
                            Web Designing<br>网站定制
                        </span>
                    </li>
                    <li>
                        <img src="./img/5.png" alt="">
                        <span>
                            Mobile Application<br>移动应用
                        </span>
                    </li>
                    <li>
                        <img src="./img/4.png" alt="">
                        <span>
                            E-COMMERCE<br>电商平台
                        </span>
                    </li>
                </ul>
                <ul class="clearfix">
                    <li>
                        <img src="./img/3.png" alt="">
                        <span>
                            UI&UX<br>用户界面
                        </span>
                    </li>
                    <li>
                        <img src="./img/2.png" alt="">
                        <span>
                            GRAPHIC DESIGN<br>平面设计
                        </span>
                    </li>
                    <li>
                        <img src="./img/1.png" alt="">
                        <span>
                            Branding<br>品牌策略
                        </span>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <div class="nav portfolio visiable clearfix">
        <div class="box">
            <h2>Our portfolio</h2>
            <span></span>
            <div class="items">
                <span>ALL</span>
                <span>Web Design</span>
                <span>GRAPHIC DESIGN</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/33.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/32.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/31.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/30.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/29.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/28.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/27.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/26.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/25.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/35.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/24.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/23.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/22.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/21.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/20.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/19.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/18.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/17.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/16.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/15.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/14.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/1.gif" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/13.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/12.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/11.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/10.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
        <div class="pic">
            <img src="./img/9.jpg" alt="">
            <div>
                <span>view project</span>
            </div>
        </div>
    </div>

    <div class="nav client visiable">
        <div class="covers">
            <div class="box">
                <h2>Our clients</h2>
                <img src="./img/7.png" alt="">
                <p>
                    <span>
                        Dave Lucker<br>CEO<br>
                    </span>
                    <span>
                        Aenean dignissim libero et quam tristique vel vehicula nunc suscipit. Fusce id dui sem. Cras
                        gravida odio et magna
                        <br>faucbus iaculis. Vestibulum ante ipsum primis in faucibus orci. Luctus et ultrices posuere..
                    </span>
                </p>
            </div>
        </div>
    </div>

    <div class="nav behance visiable clearfix">
        <div class="box">
            <img src="./img/34.jpg" alt="">
            <span></span>
            <p>
                <span>
                    没有什么让我们喜欢卷起衣袖，开始一个全新的项目。让我们一起做一些伟大的事情。<br>
                </span>
                <span>
                    There’s nothing we like more than rolling up our sleeves and starting a brand new project. Let’s
                    make something great together.
                </span>
            </p>
        </div>
        <div class="info">
            <ul>
                <h3>Telephone</h3>
                <li>+86-132-4298-6960</li>
            </ul>
            <ul>
                <h3>Address</h3>
                <li>OCTRoom502B,BuildingB-3,</li>
                <li>OCTLOFT,Shenzhen,China-LOFT</li>
                <li>深圳市南山区华侨城创意文化园北区B3栋502B</li>
            </ul>
            <ul>
                <h3>Email给我</h3>
            </ul>
        </div>
    </div>

    <div class="nav contact">
        <div class="container">
            <p>海互动传媒有限公司</p>
            <p>
                <span>© 2012-2020 SEA INTERACTION</span>
                <a href="javascript:;">站长统计</a>
                <a href="javascript:;">粤ICP备12070875号</a>
            </p>
            <div>
                <a href="javascript:;">
                    <img src="./img/2.gif" alt="">
                </a>
            </div>
        </div>
    </div>


    <script>
        var nav = document.querySelector('nav')
        var navImg = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg"];

        var num = 0
        function show() {
            num++
            if (num > navImg.length - 1) num = 0
            nav.style.backgroundImage = `url(${navImg[num]})`
            nav.classList.remove('active')
            nav.classList.add('active')
        }
        setInterval(show, 4000)

        var title = document.querySelector('nav .title')

        var lis = document.querySelectorAll('nav ul li a')
        var newLis = Array.from(lis)
        newLis.splice(5, 1)

        var navs = document.querySelectorAll('.nav')
        var newNavs = Array.from(navs)
        newNavs.splice(5, 1)

        function change() {
            title.style.backgroundColor = '#fff'
            var items = title.querySelectorAll('a')
            items.forEach(function (it) {
                it.style.color = "#000"
            })
            lis.forEach(function (v) {
                if (!v.classList.contains('active')) {
                    v.onmouseover = function () {
                        v.classList.add('active')
                    }
                    v.onmouseout = function () {
                        v.classList.remove('active')
                    }
                }
                else {
                    v.onmouseout = function () {
                        v.classList.add('active')
                    }
                }

              
            })
        }
        

        function changeback() {
            
            title.style.backgroundColor = 'transparent'
            var items = title.querySelectorAll('a')
            items.forEach(function (it) {
                it.style.color = "#fff"
                lis[0].classList.remove('active')
                
            })
            lis.forEach(function (v) {
                if (!v.classList.contains('actives')) {
                    v.onmouseover = function () {
                        v.classList.add('actives')
                    }
                    v.onmouseout = function () {
                        v.classList.remove('actives')
                    }
                }
            })
        }


        /* 滚动事件 */
        window.onscroll = function () {
            var divs = document.querySelectorAll('.visiable')
            var scrollTop = document.documentElement.scrollTop
            var height = scrollTop + title.offsetTop

           

            /* 添加动画 */
            var arr = []
            divs.forEach(function (v) {
                arr.push(v.offsetTop)
            })
            if (height + 87 > arr[0]) {
                var item = divs[0].querySelector('.welcome .box')
                item.classList.add('show1')
            }
            if (height + 110 > arr[1]) {
                var items = divs[1].querySelectorAll('.cover .box dl')
                items.forEach(function (item) {
                    item.classList.add('show2')
                })
            }
            if (height > arr[2]) {
                var items = divs[2].querySelectorAll('li')
                items.forEach(function (item) {
                    item.classList.add('show3')
                })
            }
            if (height > arr[3]) {
                var items = divs[3].querySelectorAll('li')
                items.forEach(function (item) {
                    item.classList.add('show1')
                })
            }
            if (height > arr[4]) {
                var items = divs[4].querySelectorAll('.pic')
                items.forEach(function (item) {
                    item.classList.add('show4')
                })
            }
            if (height + 100 > arr[5]) {
                var item = divs[5].querySelector('img')
                item.classList.add('active')
            }
            if (height + 98 > arr[6]) {
                var item = divs[6].querySelector('img')
                var uls = divs[6].querySelectorAll('ul')
                item.classList.add('active')
                uls.forEach(function (v) {
                    v.classList.add('show5')
                })
            }


            /* 楼层滚动 */
            for (let i = 0; i < newNavs.length; i++) {
                
                const ele = newNavs[i];
                var scrollY = window.scrollY
                var start_pos = ele.offsetTop - title.offsetHeight
                var end_pos = start_pos + ele.offsetHeight

                if (i === newNavs.length - 1) {
                    var start_pos = navs[5].offsetTop - title.offsetHeight
                    if (scrollY > start_pos) {
                      
                        newLis.forEach(function (v, j) {
                            i === j ? v.classList.add('active') : v.classList.remove('active')
                        })
                    }
                 
                }

                else if (scrollY > start_pos && scrollY < end_pos) {
                   if(i === 0 && scrollY === 0){
                       changeback()
                       return
                   }
               
                    newLis.forEach(function (v, j) {
                        i === j ? v.classList.add('active') : v.classList.remove('active')
                    })
                }
               
                change()
            }
            
        }


        /* 楼层返回 */
        for (let i = 0; i < newLis.length; i++) {
            const ele = newLis[i];

            ele.onclick = function () {
                var scrollY = navs[i].offsetTop - title.clientHeight + 1
                var scrollPos = document.documentElement.scrollTop
                
                

                if (scrollPos > scrollY) {
                    
                    timer = setInterval(function () {
                        if (scrollPos > scrollY) {
                            scrollPos = scrollPos - 100
                            scrollPos - scrollY < 100 ? window.scrollTo(0, scrollY) : window.scrollTo(0, scrollPos)
                            // scrollPos !== 0 ? change() : changeback()
                        } else {
                            clearInterval(timer)
                        }
                    }, 20)
                   
                } else {
                    timer = setInterval(function () {
                        if (scrollPos < scrollY) {
                            scrollPos = scrollPos + 100
                            scrollY - scrollPos < 100 ? window.scrollTo(0, scrollY) : window.scrollTo(0, scrollPos)
                            // scrollPos !== 0 ? change() : changeback()
                        } else {
                            clearInterval(timer)
                        }
                    }, 20)
                   
                }
            }
        }


    </script>
</body>

</html>